<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/portal.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/dhtmlxscheduler.css">
	
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/dhtmlxscheduler.js"></script>
	<script type="text/javascript" src="js/dhtmlxscheduler_timeline.js"></script>

	<style type="text/css" media="screen">
		html, body{
			margin:0;
			padding:0;
			height:100%;
			overflow:hidden;
		}

		.dhx_cal_event div.dhx_footer,
		.dhx_cal_event.past_event div.dhx_footer,
		.dhx_cal_event.event_english div.dhx_footer,
		.dhx_cal_event.event_math div.dhx_footer,
		.dhx_cal_event.event_1 div.dhx_footer{
			background-color: transparent !important;
		}
		.dhx_cal_event .dhx_body{
			-webkit-transition: opacity 0.1s;
			transition: opacity 0.1s;
			opacity: 0.7;
		}
		.dhx_cal_event .dhx_title{
			line-height: 12px;
		}
		.dhx_cal_event_line:hover,
		.dhx_cal_event:hover .dhx_body,
		.dhx_cal_event.selected .dhx_body,
		.dhx_cal_event.dhx_cal_select_menu .dhx_body{
			opacity: 1;
		}

		.dhx_cal_event.event_1 div, .dhx_cal_event_line.event_1{
			background-color: #36BD14 !important;
			border-color: #698490 !important;
		}
		.dhx_cal_event_clear.event_1{
			color:#36BD14 !important;
		}

		.dhx_cal_event.event_2 div, .dhx_cal_event_line.event_2{
			background-color: #FC5BD5 !important;
			border-color: #839595 !important;
		}
		.dhx_cal_event_clear.event_2{
			color:#B82594 !important;
		}

		.dhx_cal_event.event_3 div, .dhx_cal_event_line.event_3{
			background-color: orange !important;
			border-color: #a36800 !important;
		}
		.dhx_cal_event_clear.event_3{
			color:orange !important;
		}

	</style>

</head>

<body class="easyui-layout" onload="init();">

    <div id="header" data-options="region:'north',border:false"></div>
    <div id="menu" data-options="region:'west',split:true,title:' '" style="width:250px;"></div>
    <div id="footer" data-options="region:'south',border:false"></div>

    <div data-options="region:'center',title:' '">
		<div style="margin:5px">
			<a href="#" title="Gravar" onclick="saveSchedule();"><i class="fa fa-save" style="font-size:18px;color:green;padding:5px;"></i>Salvar</a>
			<a href="#" title="Cancelar" onclick="rejectSchedule();"><i class="fa fa-undo" style="font-size:18px;color:green;padding:5px;"></i>Cancelar</a>
		</div>
		<div style="margin:5px">
			<b>Eventos:</b> 
			<input type="radio" name="tipo_evento" value="todos" checked="checked" onchange="hideOrderField();"/> Todos
			<input type="radio" name="tipo_evento" value="ordem" onchange="showOrderField();"/> Ordem: <input id="order" style="width:80px"> <a id="orderZoom" href="#" title="Selecionar Ordem"><i class="fa fa-toggle-up" style="font-size:18px;color:gray;padding-right:7px;"></i></a>
			Usuário: <input id="user" style="width:80px"> <a id="userZoom" href="#" title="Selecionar Usuário"><i class="fa fa-toggle-up" style="font-size:18px;color:gray;padding-right:7px;"></i></a>
		</div>

		<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
			<div class="dhx_cal_navline">
				<div class="dhx_cal_prev_button">&nbsp;</div>
				<div class="dhx_cal_next_button">&nbsp;</div>
				<div class="dhx_cal_today_button"></div>
				<div class="dhx_cal_date" style="text-align: left; left: 300px"></div>
				<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
				<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
				<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
				<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
			</div>
			<div class="dhx_cal_header">
			</div>
			<div class="dhx_cal_data">
			</div>		
		</div>
    </div>
    
    <script>
            $('#header').load('header.html');
            $('#footer').load('footer.html');
            $('#menu').load('menu.html');
    </script>
	<script type="text/javascript" charset="utf-8">
		function init() {
			scheduler.locale.labels.timeline_tab = "Timeline"
			scheduler.locale.labels.section_custom="Section";
			scheduler.config.details_on_create=true;
			scheduler.config.details_on_dblclick=true;
			scheduler.config.xml_date="%Y-%m-%d %H:%i";
			scheduler.config.default_date = "%j %M %Y (#%W)";
			
			scheduler.templates.event_class=function(start, end, event){
				var css = "";

				if(event.section_id) // if event has section_id property then special class should be assigned
					css += "event_"+event.section_id;

				if(event.id == scheduler.getState().select_id){
					css += " selected";
				}
				return css; // default return

				/*
					Note that it is possible to create more complex checks
					events with the same properties could have different CSS classes depending on the current view:

					var mode = scheduler.getState().mode;
					if(mode == "day"){
						// custom logic here
					}
					else {
						// custom logic here
					}
				*/
			};

			var sections=[
				{key:1, label:"Briefing"},
				{key:2, label:"Pesquisa"},
				{key:3, label:"Layout"},
				{key:4, label:"Casting"}
			];
			
			scheduler.createTimelineView({
				name:	"timeline",
				x_unit:	"week",
				x_date:	"Week #%W",
				x_step:	  1,
				x_size:   12,
				x_start:  0,
				x_length: 12,
				y_unit:	sections,
				y_property:	"section_id",
				render:"bar"
			});
			
			scheduler.config.lightbox.sections=[	
				{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
				{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
				{name:"time", height:72, type:"time", map_to:"auto"}
			]
			
			scheduler.init('scheduler_here',new Date(2014,6,15),"month");
			scheduler.parse([
				{ start_date: "2014-06-30 09:00", end_date: "2014-06-31 12:00", text:"Task A-12458", section_id:1},
				{ start_date: "2014-07-27 16:30", end_date: "2014-07-29 18:00", text:"Task B-46558", section_id:2},
				{ start_date: "2014-08-12 14:30", end_date: "2014-08-20 16:45", text:"Task C-14244", section_id:3},
				{ start_date: "2014-08-10 12:00", end_date: "2014-06-14 18:00", text:"Task D-12458", section_id:4}
			],"json");
		}
	</script>
	<script>
		function showOrderField(){
			$("#order").css("display","");
			$("#orderZoom").css("display","");
			scheduler.init('scheduler_here',new Date(2014,5,30),"timeline");
		}
		function hideOrderField(){
			$("#order").css("display","none");
			$("#orderZoom").css("display","none");
			scheduler.init('scheduler_here',new Date(2014,5,30),"month");
		}
		
	</script>

</body>

</html>
